<template>
	<view class="pop_box">
		<view class="drop_item" @click="showList">
			<view class="drop_text ellipsis">
				{{valueStr}}
			</view>
			<view class="drop_icon">
				<image src="/static/img/b_xl.png" style="width: 70%;height: 50%;margin-top: 10rpx;"></image>
			</view>
		</view>

		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" type="bottom" @touchmove.stop.prevent="" style="z-index: 999;">
			<view class="content_city">
				<scroll-view scroll-y="true" class="scroll_view_style" :style="'height:'+windowHeight+'px;'">
					<uni-list>
						<uni-list-item :title="item.text" v-for="item in options" :key="item.value" clickable @click="handleSelect($event,item)"></uni-list-item>
					</uni-list>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "kj-dropdown",
		data() {
			return {
				valueStr: '',
				windowHeight:600
			};
		},
		props: {
			value: {
				type: Number,
				default: 0
			},
			options: {
				type: Array,
				default: () => []
			}
		},
		mounted() {
			let findValue = this.options.find(f => f.value == this.value)
			this.valueStr = findValue?.text
			// #ifdef MP-WEIXIN || MP-TOUTIAO
			const systemInfo = uni.getSystemInfoSync();
			let navbar = uni.getMenuButtonBoundingClientRect()
			this.windowHeight = systemInfo.windowHeight-(navbar.top + navbar.height+40)
			// #endif
		},
		methods: {
			showList() {
				this.$refs.popup.open()
			},
			handleSelect(e,item){
				console.log('eeeeeeeeeee---------------',e,item)
				this.valueStr = item.text
				this.$emit('change',item.value)
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	.pop_box{
	}
	.scroll_view_style{
		box-sizing: border-box;
		padding-bottom: 80rpx;
	}
	.drop_item {
		display: flex;
		align-items: center;
		// height: 80rpx;
	}
	.drop_text{
		max-width: 120rpx;
		color: #262626;
		font-size: 30rpx;
		margin-right: 6rpx;
	}
	.drop_icon{
		width: 20rpx;
		height: 20rpx;
		display: flex;
		align-items: center;
	}
	.ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
